<template name="home" class="home">
  <view>
    <view id="container" class="container"></view>
    <div class="notification">
      <div v-if="messageNum !== 0" class="heartbeat">{{ messageNum }}</div>
      <div v-else class="messageNum">{{ messageNum }}</div>
      <!-- <div class="message">New Message!</div> -->
    </div>
  </view>
</template>

<script module="aMapRenderJs" lang="renderjs">
 import { us, os } from "@/common/util/work.js";
 // import socket from "@/common/js-sdk/socket/socket.js";
 export default {
name: "home",
props: {
  // cur: String,
},
watch: {
  // cur: {
  //   immediate: true,
  //   handler: function (val, oldVal) {
  //     console.log("cur", val, oldVal);
  //     this.initMenu();
  //   },
  // },
},
data() {
  return {
    usList: us.data,
    osList: os.data,
    messageNum:2,
    msgCount: 0,
    dot: {
      mailHome: false,
      },
      h3tit: "人员轨迹",
    timer: null,//单人定时
    manyTime:null,//多人实时
    markerSpeed: 200,
    speedCount: 1,
    pName:'---',
    lineArr: [
      [116.478935, 39.997761],
      [116.478939, 39.997825],
      [116.478912, 39.998549],
      [116.478912, 39.998549],
      [116.478998, 39.998555],
      [116.478998, 39.998555],
      [116.479282, 39.99856],
      [116.479658, 39.998528]
    ],
    marker: {},
    pathArr:[],
    map: {},
    firstArr: [120.11296645567579, 30.290059843858472],
      polyline: {},
      trackData:[
      { lng: 116.4074, lat: 39.9042 }, // 点1：北京天安门广场附近
      { lng: 116.4174, lat: 39.9142 }, // 点2：稍微向北移动
      { lng: 116.4274, lat: 39.9042 }, // 点3：向东移动
      { lng: 116.4274, lat: 39.9142 }, // 点4：与点3同经度，不同纬度
      { lng: 116.4174, lat: 39.9242 }  // 点5：回到与点2同经度，继续向北
      ],
      ColorList: this.ColorList,
    lineArr1: [],
  path:[],
  polylinePath:[]

  };
},
mounted() {
  const A_MAP_KEY = "cd60afb4e5a22c569f4c42ce75a34be5"; // 地图key
  const A_MAP_SECRET_KEY = "8c30043dbe2ac5dbcedaa5f2e7320d48"; // 地图密钥
  // 地图初始化
  // if (typeof window.AMap === 'function') {
  // 		this.initAmap();
  // 	} else {
          window._AMapSecurityConfig = {
              securityJsCode: A_MAP_SECRET_KEY,
          };
          // const script = document.createElement('script');
          // script.src = `https://webapi.amap.com/maps?v=1.4.15&key=${A_MAP_KEY}&plugin=AMap.Walking`;
          // script.onload = this.initAmap.bind(this);
          // document.head.appendChild(script);
    // }

},
unmounted() {
  this.map?.destroy();
},
methods: {
  initMenu() {
    console.log("-----------home------------");
  //   this.onSocketOpen();
  //   this.onSocketReceive();
  //   this.loadCount(0);
  },
  goPage(page) {
    if (!page) {
      return false;
    }
    if (page === "annotationList") {
      this.msgCount = 0;
    }
    this.dot[page] = false;
    this.$Router.push({ name: page });
  },
  // 启动webSocket
  onSocketOpen() {
    socket.init("websocket");
  },
  onSocketReceive() {
    var _this = this;
    socket.acceptMessage = function (res) {
      // console.log("页面收到的消息", res);
      if (res.cmd == "topic") {
        //系统通知
        _this.loadCount("1");
      } else if (res.cmd == "user") {
        //用户消息
        _this.loadCount("2");
      } else if (res.cmd == "email") {
        //邮件消息
        _this.loadEmailCount();
      }
    };
  },
  loadCount(flag) {
    console.log("loadCount::flag", flag);
    let url = "/sys/annountCement/listByUser";
    //   this.$http.get(url).then((res) => {
    //     console.log("res::", res);
    //     if (res.data.success) {
    //       let msg1Count = res.data.result.anntMsgTotal;
    //       let msg2Count = res.data.result.sysMsgTotal;
    //       this.msgCount = msg1Count + msg2Count;
    //       console.log("this.msgCount", this.msgCount);
    //     }
    //   });
  },
  loadEmailCount() {
    this.dot.mailHome = true;
  },
  getTtemDotInfo(item) {
    if (item.page === "annotationList" && this.msgCount > 0) {
      return this.msgCount;
    }
    return "";
  },
  //初始化地图
    initAmap() {
      this.map = new AMap.Map("container", {
          resizeEnable: true,
          center: [114.4293, 30.5162],
          zoom: 12
      });
      AMap.plugin(
      [
          "AMap.ToolBar",
          "AMap.Scale",
        //   "AMap.MapType",
      ],
      );
      //添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
      this.map.addControl(new AMap.ToolBar());

      //添加比例尺控件，展示地图在当前层级和纬度下的比例尺
      this.map.addControl(new AMap.Scale());

      //添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    //   this.map.addControl(new AMap.MapType());
    //覆盖物的圈圈
        var circle = new AMap.Circle({
          map: this.map,
          center: new AMap.LngLat("114.42935", "30.5162"), //圆心位置
          radius: 4500, //半径 单位:米
          strokeColor: "#1a61d3", //线颜色
          strokeOpacity: 1, //线透明度
          strokeWeight: 3, //线粗细度
          fillColor: "#d3e3fd", //填充颜色
          fillOpacity: 0.35, //填充透明度
        });
        this.manyPersonWays(this.map)
  },
     //多目标点实时封装
    manyPersonWays(map) {
        // 武汉洪山区的经纬度范围
const minLatitude = 30.505 ; // 最小纬度
const maxLatitude = 30.529; // 最大纬度
const minLongitude = 114.397; // 最小经度
const maxLongitude = 114.428; // 最大经度

// 创建地图时初始化折线对象数组和颜色数组
var polylines = [];
var colors = ['#3366FF', '#FF0000', '#00FF00', '#495ac5', '#FF00FF', '#FF00FF']; // 不同颜色的数组

// 初始化标记点的位置（模拟）
    var markers = [];
    for (var i = 0; i < 3; i++) {
        var initialStatus = Math.floor(Math.random() * 3) + 1; // 生成随机初始状态（假设有3种状态）
        var marker = new AMap.Marker({
            position: [getRandomInRange(minLongitude, maxLongitude), getRandomInRange(minLatitude, maxLatitude)], // 随机生成位置
            map: map,
            icon: getIconUrl(initialStatus), // 根据初始状态选择图标
            status: initialStatus, // 初始状态
            // angle: Math.random() * 360 // 随机初始角度
        });
        markers.push(marker);
    }

    // 更新标记位置的函数（模拟）
    function updateMarkers(markers) {
        // 模拟每个标记位置的变化
        for (var i = 0; i < markers.length; i++) {
            var marker = markers[i];
            // 模拟标记点每次位置的变化
            var newPosition = [marker.getPosition().lng + Math.random() * 0.01, marker.getPosition().lat + Math.random() * 0.01];
            marker.setPosition(newPosition);
            // 模拟状态的变化
            // marker.status = (marker.status % 3) + 1; // 假设有3种状态
            // 更新折线路径并指定颜色
            updatePolylinePath(marker, colors[i]);
            // 更新标记图标
            updateMarkerIcon(marker);
        }
    }
    // 更新标记图标
    function updateMarkerIcon(marker) {
        // 获取当前marker的状态
        // console.log(marker.w.status,'marker');
        // 根据状态设置不同的图标
        // marker.setAngle(marker.w.angle);
        marker.setIcon(getIconUrl(marker.w.status));
    }
        // 根据状态获取图标 URL
    function getIconUrl(status) {
        switch (status) {
            case 1:
                return 'static/yellow.png'; // 黄色图标 URL
            case 2:
                return 'static/blue.png'; // 蓝色图标 URL
            case 3:
                return 'static/perpul.png'; // 紫色图标 URL
            default:
                return 'static/blue.png'; // 默认图标 URL
        }
    }
// 绘制标记点的路线并指定颜色
function updatePolylinePath(marker, color) {
    var path = []; // 折线路径数组
    if (marker.previousPosition) {
        // 如果存在上一个位置，则绘制从上一个位置到当前位置的折线
        path.push(marker.previousPosition); // 上一个位置
        path.push(marker.getPosition()); // 当前位置

        // 在路径数组中添加起点和终点
        var startPoint = path[0];
        var endPoint = path[path.length - 1];
        path.unshift(startPoint); // 添加起点
        path.push(endPoint); // 添加终点

        // 创建折线对象，并指定颜色和箭头标记
        var polyline = new AMap.Polyline({
            map: map,
            path: path, // 折线路径
            strokeColor: color, // 指定颜色
            strokeOpacity: 1,
            strokeWeight: 3,
            strokeStyle: 'solid',
            strokeDasharray: [10, 5],  // 线样式为虚线
            showDir: true // 显示箭头标记
        });

        // 将折线对象添加到数组中
        polylines.push(polyline);
    }

    // 更新标记点的上一个位置
    marker.previousPosition = marker.getPosition();
}

// 生成指定范围内的随机数
function getRandomInRange(min, max) {
    return Math.random() * (max - min) + min;
}

// 每秒更新标记位置
setInterval(function() {
      updateMarkers(markers);
  }, 1000);

    }
}
 };
</script>

<style scoped>
.home {
  position: relative;
}
css .notification {
  display: inline-block;
  position: relative;
}

.heartbeat {
  width: 40px;
  height: 40px;
  background-color: #ff4835;
  border-radius: 50%;
  position: absolute;
  top: 10%;
  left: 6%;
  transform: translate(-50%, -50%);
  animation: heartbeat 1s infinite;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  z-index: 9999;
}
.messageNum {
  width: 40px;
  height: 40px;
  background-color: #4095e5;
  border-radius: 50%;
  position: absolute;
  top: 10%;
  left: 6%;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.cu-list.grid > .cu-item {
  padding: 0px 0px;
}
.line2-icon {
  width: 60px;
  height: 60px;
}
#container {
  height: 100vh;
  width: 100%;
}
::v-deep .amap-touch-toolbar .amap-zoomcontrol {
  position: absolute;
  bottom: 120px !important;
}
</style>
